{% extends 'SystemAdminBundle:base:main.0.html.twig' %}

{% block content %}
    {% block main %}

        <form method="post" action="" target="mainframe">
        <div id="floatHead" class="content-tab-wrap">
            <div class="content-tab">
                <div class="content-tab-ul-wrap">
                    <ul>
                        <li><a class="selected" href="javascript:;">管理题目和题目分组</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="tab-content" style="padding-bottom: 90px;">
            {#{{ dump(Attach) }}#}
            <input type="hidden" name="id" value="{{ Exam.id }}" />
            {#题型及题目安排#}
            <div id="examQuestion_main">
                {#工具栏#}
                <div class="tool">
                    <input name="btnReturn" type="button" value="+分组" class="btn green" onclick="showExamQuestionGroupEditor()">
                    <input name="btnReturn" type="button" value="+题目" class="btn green" onclick="showExamQuestionSelector()">
                    {#<input name="btnReturn" type="button" value="上移" class="btn yellow" onclick="test()">#}
                    {#<input name="btnReturn" type="button" value="下移" class="btn yellow" onclick="test()">#}
                    {#<input name="btnReturn" type="button" value="删除" class="btn violet" onclick="test()">#}
                    <input type="hidden" id="examId" value="{{ Exam.id }}">
                    <input type="hidden" id="groupId" value="0">
                </div>
                <div class="target">当前编辑内容：《{{ Exam.title }}》<span class="question"></span></div>
                {#内容栏#}
                <div class="main">
                    {#题目安排区 left#}
                    <div class="left">
                        <ul>
                            <li>
                                <a>第一题：单选题，共20题，每题1分，共20分</a>
                                <ul>
                                    <li><a>1.钢铁是怎样炼成的是谁写的？</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    {#内容编辑区 right#}
                    <div class="right">
                        {#指示头#}
                        <div class="header">
                            分组管理
                        </div>
                        {#工作区域#}
                        <div class="work">
                            <div class="group" style="display: none;">
                                <dl>
                                    <dt>题目要求</dt>
                                    <dd>
                                        <input name="GroupTitle" type="text" id="GroupTitle" class="input normal long" datatype="*">
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>
                                        要求说明
                                    </dt>
                                    <dd>
                                        {#<textarea datatype="*" name="GroupIntro" id="GroupIntro" class="editor"></textarea>#}
                                        <input name="GroupIntro" id="GroupIntro" class="editor" />
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>

                                    </dt>
                                    <dd>
                                        <input type="button" value="添加" id="btnSubmit" class="btn" onclick="addExamQuestionGroup()" />
                                    </dd>
                                </dl>
                            </div>
                            <div class="question">
                                <dl>
                                    <dt>选项类型</dt>
                                    <dd>
                                        <div class="rule-single-select">
                                            <select id="ChoiceType" name="type"datatype="*">
                                                <option value="0">单选</option>
                                                <option value="1">多选</option>
                                            </select>
                                        </div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>获取列表数据</dt>
                                    <dd>
                                        <input name="btnReturn" type="button" value="点击获取列表数据" class="btn green" onclick="showExamQuestionSelector()">
                                    </dd>
                                </dl>
                                <hr>
                                <dl>
                                    <dt>选择分组</dt>
                                    <dd>
                                        <div class="subTarget">请先选择左侧的大分组再做操作</div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>设置分值</dt>
                                    <dd>
                                        <input name="Score" type="text" id="Score" class="input normal" datatype="n" value="1">
                                    </dd>
                                </dl>
                                <div class="questionList">
                                    <ul>
                                        <li>
                                            <a><span class="icon-btn add"><i></i></span>题目正在加载……</a>
                                            <ul>
                                                <li><a>正在获取选项信息</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {#题型及题目安排#}
        </div>
        {% block submit %}
            <div class="page-footer">
                <div class="btn-wrap">
                    <input type="submit" value="提交保存" id="btnSubmit" class="btn" />
                    <input name="btnReturn" type="button" value="返回上一页" class="btn yellow" onclick="javascript:history.back(-1);" />
                </div>
            </div>
        {% endblock %}
        </form>
    {% endblock %}
    <!-- 需引入-->
    <script type="text/javascript" charset="utf-8" src="{{ asset("bundles/systemadmin/js/laymain.js")}}"></script>
    {% block script %}
        {#---------------------------------------题目编辑CSS------------------------------------#}
        <style>
            #examQuestion_main{

            }
            #examQuestion_main .tool{
                border-bottom: 1px solid #CCC;
                padding: 10px 0;
            }
            #examQuestion_main .target{
               height: 40px;
                line-height: 40px;
                text-align: left;
                font-size: 16px;
            }
            #examQuestion_main .main{

            }
            #examQuestion_main .main .left{
                float: left;
                width: 35%;
                /*height: 447px;*/
                /*overflow-y: scroll;*/
            }

            #examQuestion_main .main .left>ul>li>aa{
                padding: 16px 5px;
                display: block;
                background: #333;
                color: #EEE;
                font-size: 18px;
                line-height: 27px;
                text-decoration: none;
                cursor: pointer;
                border-bottom: 1px solid #999;
            }
            #examQuestion_main .main .left>ul>li>ul>li{
                border-bottom: 1px solid #777;
            }
            #examQuestion_main .main .left>ul>li>ul>li>a{
                padding: 10px 14px;
                display: block;
                background: #666;
                color: #EEE;
                font-size: 14px;
                text-decoration: none;
                cursor: pointer;
            }
            #examQuestion_main .main .right{
                float: left;
                width: 65%;
            }

            #examQuestion_main .main .right .header{
                padding: 16px 5px;
                display: block;
                background: #DDD;
                color: #333;
                font-size: 18px;
                text-decoration: none;
                cursor: pointer;
            }
            #examQuestion_main .main .right .work{
                background: #EEE;
            }

            .questionList ul>li{
            }

            .questionList ul>li>a{
                color: #222;
                font-size: 14px;
                text-decoration: none;
                padding: 16px 15px;
                display: block;
                background: #EEE;
                cursor: pointer;
            }

            .questionList>ul>li>ul>li{
                border-bottom: 1px solid #333;
            }
            .questionList>ul>li>ul>li>a{
                padding: 10px 32px;
                display: block;
                background: #EEE;
                color: #222;
                font-size: 12px;
                text-decoration: none;
                cursor: pointer;
            }
        </style>
        {#---------------------------------------题目编辑CSS------------------------------------#}
        {#---------------------------------------题目编辑Js------------------------------------#}
        <script>
            {#var ExamId = {{ Exam.id }};#}
            //================================================================
            //---------试卷内分组设置相关-------------------------------------
            //显示编辑器
            function showExamQuestionGroupEditor(){
                $(".question").hide();
                $(".group").show();
            }
            //新增分组
            function addExamQuestionGroup(){
                var GroupTitle = $("#GroupTitle").val();
                KindEditor.sync('#GroupIntro');
                var GroupIntro = $("#GroupIntro").val();
                $.get(
                        "{{ path("ExamAddQuestionGroup",{id:Exam.id}) }}",
                        {
                            GroupTitle:GroupTitle,
                            GroupIntro:GroupIntro
                        },
                        function (data) {
                            if(data.s == 1) {
                                showExamQuestionList(data.d);
                            }else {
                                alert(data.i);
                            }
                        }
                )
            }
            //---------试卷内分组设置相关-------------------------------------

            //获取试卷内的所有题目及分组安排
            function ExamGetQuestion(){
                $.get(
                        "{{ path("ExamGetQuestion",{id:Exam.id}) }}",
                        function (data) {
//                            console.log(data);
                            if(data.s == 1) {
                                showExamQuestionList(data.d);
                            }else {
                                alert(data.i);
                            }
                        }
                )
            }
            //展示试卷的题目分组及题目
            function showExamQuestionList(groupList){
                var box = $('.left');
                var ul = $("<ul>");
                for(var i in groupList) {
                    var li = $("<li>");
                    var a = $("<aa>");
                    var title = groupList[i]["title"];
                    a.text("");

                    //
                    var span =$("<del>[删除]</del><up>[上移]</up><down>[下移]</down>");
                    span.css({float:"right",fontWeight:"bold"});
                    a.append(span);
                    a.append(title);

                    a.attr("data",groupList[i]["id"]);
                    a.attr("title",groupList[i]["title"]);
                    li.append(a);
                    var ul1 = $("<ul>");
                    var Question = groupList[i]["questions"];
                    for(var m in Question) {
                        var li1 = $("<li>");
                        var a1 = $("<a>");
                        var str = (parseInt(m)+1) + "." + Question[m]["title"];
                        a1.text("");

                        a1.attr("data",Question[m]["id"]);
                        //
                        var span1 =$("<del>[删除]</del><up>[上移]</up><down>[下移]</down>");
                        span1.css({float:"right",fontWeight:"bold"});
                        a1.append(span1);
                        a1.append(str);
                        li1.append(a1);
                        ul1.append(li1);
                    }
                    ul1.on("click","a", function (e) {
                        var tag = e.target.tagName;
                        var _this = $(this);
                        var id = _this.attr("data");
//                        console.log(tag);
                        switch (tag) {
                            case "A":
                                //展开题目列表
//                                console.log(tag);
                                break;
                            case "UP":
                                //上移一层
                                action_question(id,"up");
                                break;
                            case "DOWN":
                                //下移一层
                                action_question(id,"down");
                                break;
                            case "DEL":
                                //删除
                                action_question(id,"del");
                                break;
                            default :
                                //预留其他按钮接口
                                console.log(tag);
                        }
                    });
                    li.append(ul1);
                    ul.append(li);
                }
                ul.on("click","aa", function (e) {
                    var tag = e.target.tagName;
                    var _this = $(this);
                    var title = _this.attr("title");
                    var id = _this.attr("data");

                    switch (tag) {
                        case "AA":
                            //展开题目列表
                            $(this).siblings().toggle(50);
                            $("#groupId").val(id);
                            $(".subTarget").text( "|->" + _this.attr("title"));
                            break;
                        case "UP":
                            //上移一层
                            action(id,"up");
//                            console.log(tag);
                            break;
                        case "DOWN":
                            //下移一层
                            action(id,"down");
                            break;
                        case "DEL":
                            //删除
                            action(id,"del");
                            break;
                        default :
                            //预留其他按钮接口
                            console.log(tag);
                    }
                });
                box.html(ul);
            }
            //分组属性编辑
            function action(id,action){
                $.post(
                        "{{ path("ExamGroupEdit",{id:Exam.id}) }}",
                        {
                            id:id,
                            action:action
                        },
                        function (data) {
                            if(data.s == 1) {
                                showExamQuestionList(data.d);
                            }else {
                                alert(data.i);
                            }
                        }
                );
            }
            //分组题目属性编辑
            function action_question (id,action){
                $.post(
                        "{{ path("ExamQuestionEdit",{id:Exam.id}) }}",
                        {
                            id:id,
                            action:action
                        },
                        function (data) {
                            if(data.s == 1) {
                                showExamQuestionList(data.d);
                            }else {
                                alert(data.i);
                            }
                        }
                );
            }

            //================================================================
            //---------试卷题目添加相关---------------------------------------
            //显示题目选择器
            function showExamQuestionSelector(){

                ExamGetQuestion4Choose();
                $(".question").show();
                $(".group").hide();
            }
            //获取相应类目下的试题记录
            function ExamGetQuestion4Choose(){
                var type = $("#ChoiceType").val();
                $.get(
                        "{{ path("ExamGetQuestion4Choose",{id:Exam.id}) }}?type=" + type,
                        function (data) {
                            var questionList = data.d;
                            showQuestionList(questionList);
                        }
                )
            }
            //展示并填充相应数据
            function showQuestionList(questionList){
                var box = $('.questionList');
                var ul = $("<ul>");
                for(var i in questionList) {
                    var li = $("<li>");
                    var a = $("<a>");
                    var title = questionList[i]["title"];
                    var questionType = questionList[i]["type"] == 1? "[多选]" : "[单选]";
                    a.text( questionType + title);
                    a.prepend('<span class="icon-btn add"><i></i></span>');
                    a.attr("data",questionList[i]["id"]);
                    li.append(a);
                    var ul1 = $("<ul>");
                    ul1.hide();
                    var Choice = questionList[i]["Choice"];
                    for(var m in Choice) {
                        var li1 = $("<li>");
                        var a1 = $("<a>");
                        var str = (parseInt(m)+1) + "." + Choice[m]["Content"];
                        a1.text(str);
                        li1.append(a1);
                        ul1.append(li1);
                    }
                    li.append(ul1);
                    ul.append(li);
                }
                ul.on("click","a", function (e) {
                    var tag = e.target.tagName;
                    if (tag == "A") {
                        //展开选项
                        $(this).siblings().toggle(200);
                    }else{
                        //添加到试卷
                        var questionId = $(this).attr("data");
                        var groupId = $("#groupId").val();
                        var Score = $("#Score").val();
                        if (groupId == 0) {
                            alert("请先选择左侧的分组");
                            return false;
                        }
                        addQuestion2Exam( questionId , groupId  ,Score);
                        console.log( "题目ID：" + questionId + "当前分组：" + groupId );
                        $(this).parent().remove();
                    }
                });
                box.html(ul);
            }
            //将选取的id填充到试卷内
            function addQuestion2Exam( questionId , groupId ,Score){
                $.post(
                        "{{ path("ExamAddQuestion",{id:Exam.id}) }}",
                        {
                            questionId:questionId,
                            groupId:groupId,
                            Score:Score
                        },
                        function (data) {
//                            console.log(data);
                            if(data.s == 1) {
                                showExamQuestionList(data.d);
                            }else {
                                alert(data.i);
                            }
                        }
                );
            }
            //---------试卷题目添加相关---------------------------------------

            $(function () {
                ExamGetQuestion4Choose();
                ExamGetQuestion();
            });
        </script>
        {#---------------------------------------题目编辑Js------------------------------------#}

        {% include 'SystemAdminBundle:base:inc.js.article.twig' %}
        {% include 'SystemAdminBundle:base:inc.js.pic.upload.twig' %}
    {% endblock %}
{% endblock %}